<template>
  <div>
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >实名认证</van-col
      >
      <van-col span="8"></van-col>
    </van-row>
    <van-row class="topMargin">
      <van-col span="24">
        <van-form style="margin-top:20px">
          <van-field
            readonly
            v-model="certification.name"
            name="姓名"
            label="姓名"
            placeholder="姓名"
          />
          <van-field
            v-model="certification.number"
            name="身份证号"
            label="身份证号"
            placeholder="身份证号"
          />
          <van-field name="uploader" label="身份证照正面">
            <template #input>
              <van-uploader id="uploader_1" v-model="uploader1"  max-count=1 :after-read="onRead1" />
            </template>
          </van-field>
          <van-field name="uploader"   label="身份证照背面">
            <template #input>
              <van-uploader id="uploader_2" max-count=1 v-model="uploader2" :after-read="onRead2" />
            </template>
          </van-field>
        </van-form>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24" style="text-align:center"></van-col>
    </van-row>
    <div class="footer">
      <van-button style="width:100px" square type="primary" size="small" @click="commit">提交审核</van-button>
    </div>
  </div>
</template>

<script>
import Certification from '../../../model/certification';
import { Api } from "../../../api/api_config";
import { Toast } from "vant";

export default {
  data() {
    return {
      certification: {},
      uploader1: [],
      uploader2: [],
      currentUser: {}
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.certification = new Certification()
      this.currentUser = this.$store.state.configuration.currentUser;
      this.certification.name = this.currentUser.name
      this.certification.certificateType = '身份证'
      this.certification.type = 1
    },
    back() {
      this.$router.push("/personalInfo");
    },
    onRead1(_file) {
      let file = _file.file;
      this.formData = new FormData();
      this.formData.append("files", file);
      let that = this;

      this.$axios({
            method: Api.file.upload.method,
            url: Api.file.upload.url,
            data: this.formData
          })
        .then(function (response) {
          that.certification.filelist[0].id = response.data[0].id
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    onRead2(_file) {
      let file = _file.file;
      this.formData = new FormData();
      this.formData.append("files", file);
      let that = this;

      this.$axios({
            method: Api.file.upload.method,
            url: Api.file.upload.url,
            data: this.formData
          })
        .then(function (response) {
          that.certification.filelist[1].id = response.data[0].id
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    commit() {
      let that = this
      this.$axios({
            method: Api.account.certification.method,
            url: Api.account.certification.url,
            data: this.certification
          })
        .then(function () {
          Toast.success("提交认证成功");
          that.$router.push("/personalInfo");
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  },
};
</script>

<style scoped>
</style>
